<template>
    <el-dialog v-model="dialogVisible" title="选择商品" width="800px" @open="handleDialogOpen" @close="handleClose">
        <!-- 搜索表单 -->
        <el-form :model="searchForm" inline>
            <el-form-item label="商品名称">
                <el-input v-model="searchForm.name" placeholder="请输入商品名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button :icon="RefreshRight" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 商品表格 -->
        <el-table :data="tableData" border height="400px" @row-click="handleRowClick">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column align="center" label="商品图片">
                <template #default="scope">
                    <el-image
                        style="width: 45px; height: 45px;"
                        :src="scope.row.image_url[0]"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" min-width="150" />
            <el-table-column prop="price" label="价格" width="120" align="center">
                <template #default="scope">
                    ¥ {{ scope.row.price }}
                </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="100" align="center" />
            <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-button type="primary" link @click.stop="selectProduct(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, RefreshRight } from '@element-plus/icons-vue';
import { getGoodsListApi } from '@/api/goods';

// 定义 Props
const props = defineProps({
    modelValue: Boolean, // 控制对话框显示/隐藏
});

// 定义 Emits
const emit = defineEmits(['update:modelValue', 'select']);

// 对话框显示状态
const dialogVisible = ref(false);

// 监听外部传入的 modelValue，控制对话框显示
watch(
    () => props.modelValue,
    (val) => {
        dialogVisible.value = val;
    }
);

// 关闭对话框时通知父组件
const handleClose = () => {
    dialogVisible.value = false;
    emit('update:modelValue', false);
};

// 搜索表单
const searchForm = reactive({
    name: '',
});

// 表格数据
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

// 加载表格数据
const loadTableData = async () => {
    try {
        const response = await getGoodsListApi({
            page: currentPage.value,
            pageSize: pageSize.value,
            ...searchForm,
        });
        tableData.value = response.data.list;
        total.value = response.data.total;
    } catch (error) {
        ElMessage.error('加载商品数据失败');
    }
};

// 搜索
const handleSearch = () => {
    currentPage.value = 1; // 搜索后回到第一页
    loadTableData();
};

// 重置
const handleReset = () => {
    searchForm.name = '';
    currentPage.value = 1; // 重置后回到第一页
    loadTableData();
};

// 分页大小变化
const handleSizeChange = (size: number) => {
    pageSize.value = size;
    loadTableData();
};

// 当前页变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page;
    loadTableData();
};

// 点击行选择商品
const handleRowClick = (row: any) => {
    selectProduct(row);
};

// 选择商品
const selectProduct = (product: any) => {
    emit('select', product); // 将选中的商品传递给父组件
    handleClose(); // 关闭对话框
};

// 对话框打开时加载数据
const handleDialogOpen = () => {
    currentPage.value = 1; // 重置分页到第一页
    loadTableData(); // 加载数据
};
</script>

<style scoped>
.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>